<template>
  <div class="mt-art">
    <div>
      <div class="nav">
        <span class="navName">有格调</span>
        <ul v-for="(item,idx) in navList" :key="idx" class="navList">
          <!-- <dt>有格调</dt> -->
          <li :class="{active:kind===item}" :kind="item" @mouseenter="enter">{{item}}</li>
        </ul>
      </div>
      <div v-if="kind" class="navCon">
        <ul class="nacItemList">
          <li v-for="(item,idx) in navConList.child" :key="idx" class="navItemCon">
            <nuxt-link :to="item.url">
              <div class="itemImg">
                <img :src="item.img">
              </div>
              <div class="con">
                <div class="title">{{item.name}}</div>
                <div class="subTitle">{{item.desc}}</div>
                <div class="priceInfo">
                  <span class="curPrice">{{item.curPrice}}</span>
                  <span class="oldPrice">{{item.oldPrice}}</span>
                  <span class="place">{{item.place}}</span>
                </div>
              </div>
            </nuxt-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      navList:['全部','约会聚餐','丽人SPA','电影演出','品质出游'],
      navCon:[{
        title: '全部',
        child: [
          {
            img: '//p1.meituan.net/msmerchant/09369c7673606070434b0f1b30ba5fd092433.jpg@460w_260h_1e_1c',
            name: '兔爷北京菜（王府井新燕莎店）',
            desc: '仙桃杏仁豆腐一份，可免费使用包间',
            curPrice: '￥12',
            oldPrice: '门市价￥18',
            place: '王府井/东单',
            url: '//www.meituan.com/meishi/5122431/'
          },
          {
            img: '//p1.meituan.net/msmerchant/e68a2078393454d8609f350f7030de8c8049414.jpg@460w_260h_1e_1c',
            name: '中央电视塔空中观景旋转餐厅',
            desc: '午餐+观光',
            curPrice: '￥248',
            oldPrice: '门市价￥268',
            place: '航天桥',
            url: '//www.meituan.com/meishi/286027/'
          },
          {
            img: '//p1.meituan.net/msmerchant/8d926c334568f9fadb221bc4076e7f6e664177.jpg@460w_260h_1e_1c',
            name: '羲和小馆（王府中环店）',
            desc: '张氏狮子头1位，提供免费WIFI',
            curPrice: '￥9.9',
            oldPrice: '门市价￥25',
            place: '王府井/东单',
            url: '//www.meituan.com/meishi/164175460/'
          },
          {
            img: '//p0.meituan.net/msmerchant/1f5b280c340fb5d74080ffaebb6ec76476229.jpg@460w_260h_1e_1c',
            name: '杨记兴臭鳜鱼（王府井店）',
            desc: '经典四人餐，提供免费WIFI',
            curPrice: '￥388',
            oldPrice: '门市价￥554',
            place: '王府井/东单',
            url: '//www.meituan.com/meishi/170657888/'
          },
          {
            img: '//p1.meituan.net/msmerchant/17d8cd5405ccc74eb440af6fe7c8892f853757.png@460w_260h_1e_1c',
            name: '小徽宴餐厅',
            desc: '【招牌】8-10人餐，可免费使用包间',
            curPrice: '￥688',
            oldPrice: '门市价￥1004',
            place: '王府井/东单',
            url: '//www.meituan.com/meishi/192641950/'
          },
          {
            img: '//p0.meituan.net/msmerchant/c08c616aa835bc7cebdc3bd17184afef312214.jpg@460w_260h_1e_1c',
            name: '丰泽园饭店（王府井店）',
            desc: '2人套餐，提供免费WIFI',
            curPrice: '￥268',
            oldPrice: '门市价￥342',
            place: '王府井/东单',
            url: '//www.meituan.com/meishi/183732336/'
          }
        ]
      },{
        title: '约会聚餐',
        child: [
          {
            img: '//p1.meituan.net/msmerchant/09369c7673606070434b0f1b30ba5fd092433.jpg@460w_260h_1e_1c',
            name: '兔爷北京菜（王府井新燕莎店）',
            desc: '仙桃杏仁豆腐一份，可免费使用包间',
            curPrice: '￥12',
            oldPrice: '门市价￥18',
            place: '王府井/东单',
            url:'//www.meituan.com/meishi/5122431/'
          }
        ]
      },{
        title: '丽人SPA',
        child: [
          {
            img: '//p0.meituan.net/dpmerchantpic/189e42961a4429f773d2992f819ba4b0133319.jpg@240w_180h_1e_1c_1l|watermark=1&&r=2&p=9&x=2&y=2&relative=1&o=20|460w_260h_1e_1c',
            name: '华夏良子（崇文门店）',
            desc: '华夏良子（崇文门店）',
            curPrice: '￥233/人均',
            place: '崇文门新世界',
            url:'//www.meituan.com/xiuxianyule/28548/'          }
        ]
      },{
        title: '电影演出',
        child: [
          {
            img: '//p0.meituan.net/poi/__4774166__6456681.jpg@460w_260h_1e_1c',
            name: 'UME国际影城（安贞店）',
            desc: '免押金，可停车，有情侣座，儿童票，休息区，杜比全景声厅，4DX厅',
            curPrice: '￥19.9/人均',
            url:'//www.meituan.com/shop/94496/'   
          }
        ]
      },{
        title: '品质出游',
        child: [
          {
            img: '//p0.meituan.net/tdchotel/b90641df1318d69a5592a46afc5908ff710821.png@460w_260h_1e_1c',
            name: '北京维景国际大酒店',
            desc: '新客超值优惠，酒店套餐，天天特价，连住优惠，房量充足',
            curPrice: '￥1378/起',
            url:'//www.meituan.com/jiudian/90427516/'   
          }
        ]
      }],
      kind: '全部'
    };
  },
  watch: {},
  computed: {
    navConList: function() {
      console.log(this.navCon.filter(item => item.title === this.kind)[0])
      return this.navCon.filter(item => item.title === this.kind)[0]
    }
  },
  methods: {
    enter(e) {
      this.kind = e.target.innerHTML;
      console.log('标题',this.kind);
      console.log(e);
      const op = e.target
      op.className = 'active'
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/index/artistic.scss";
</style>